<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>盘点管理</title>
    <link rel="stylesheet" href="/layui/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/js/css/clearcss.css" media="all">
    <style>
        .layui-card-header {
            height: 68px;
            line-height: 58px;
        }

        .layui-inline .layui-form-label2 {
            padding-left: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 80px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        .divider {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            text-align: center;
            margin: 20px 0;
        }

        .divider::before,
        .divider::after {
            content: '';
            border-top: 1px solid #000;
        }

        .divider span {
            background-color: #fff;
            padding: 0 10px;
        }
        #toolListModel{
            padding: 20px;
            display: none;
        }
        #containerListModel {
            padding: 20px;
            display: none;
        }
        #putListModel {
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-form">
                    <div class="layui-inline">
                        <label class="layui-form-label2" style="width:auto">盘点单号：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="toolName" id="toolName" placeholder="请输入单号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label2">单据来源：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="model" id="model" class="layui-input" style="width: 199px"
                                   placeholder="请输入来源"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label2">创建人：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="location" id="location" class="layui-input" style="width: 199px"
                                   placeholder="请输入创建人"/>
                        </div>
                    </div>
                    <div class="layui-inline" style="float: right;">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-active="reload">清空</button>
                        <button class="layui-btn layui-btn-sm" lay-event="AllData" data-type="AllData"
                                lay-active="AllData">搜索
                        </button>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table id="checkList" lay-filter="checkList" lay-data="{id:'checkList'}"></table>
                </div>

                <div type="text/html" id="role_list" style="display:none">
<!--                    <a class="layui-btn layui-btn-sm" lay-event="add">新建</a>-->
<!--                    <a class="layui-btn layui-btn-sm" lay-event="activation">激活</a>-->
                    <a class="layui-btn layui-btn-sm" lay-event="outExcel">导出</a>
                </div>
                <script type="text/html" id="test-table-operate-barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="details">查看详情</a>
<!--                    <a class="layui-btn layui-btn-xs" lay-event="activation">激活</a>-->
<!--                    &lt;!&ndash;                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>&ndash;&gt;-->
<!--                    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>-->
                </script>
                <div type="text/html" id="role_list1" style="display:none">
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add1" data-type="add1">添加商品</button>
                    <button class="layui-btn layui-btn-sm" lay-event="grant" data-type="grant" lay-active="del">删除</button>
                </div>
                <script type="text/html" id="test-table-operate-barDemo1">
                    <a class="layui-btn layui-btn-xs" lay-event="choose">查看</a>
                    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
                </script>
                <script type="text/html" id="test-table-operate-barDemo3">
                    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
<!--                    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>-->
                </script>
            </div>
        </div>
    </div>
</div>
<div id="putListModel">
    <div class="layui-card">
        <div class="layui-card-header layui-form">
            <div class="layui-inline">
                <label class="layui-form-label2">所属设备：</label>
                <div class="layui-input-inline">
                    <select name="dept" lay-verify="dept" lay-search id="dept" lay-filter="dept">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label2">任务状态：</label>
                <div class="layui-input-inline">
                    <select name="dept" lay-verify="dept" lay-search id="status" lay-filter="dept">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label2">操作员：</label>
                <div class="layui-input-inline">
                    <select name="dept" lay-verify="dept" lay-search id="username" lay-filter="dept">
                    </select>
                </div>
            </div>

        </div>
        <div class="divider"><span>盘点单详细信息</span></div>
        <div style="width: 100%;float: left">
            <div class="layui-card-body" style="padding:0">
                <table id="putList" lay-filter="putList" lay-data="{id:'putList'}"></table>
            </div>
        </div>
    </div>
</div>
<div id="toolListModel">
    <div class="layui-card-header layui-form">
        <div class="layui-inline">
            <label class="layui-form-label2" style="width:auto">商品名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="goods" id="goods" placeholder="请输入名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label2">商品编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="code" id="code" class="layui-input" style="width: 199px"
                       placeholder="请输入商品编号"/>
            </div>
        </div>
        <div class="layui-inline" style="float: right;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-active="reload">清空</button>
            <button class="layui-btn layui-btn-sm" lay-event="AllData1" data-type="AllData1"
                    lay-active="AllData1">搜索
            </button>
        </div>
    </div>
    <table id="toolList" lay-filter="toolList" lay-data="{id:'toolList'}"></table>
    <div id="childTableContainer" style="display:none; margin-top:20px;"></div>
</div>
<div id="putListModel1">
    <div class="layui-card">
        <div class="layui-card-body" style="padding:0">
            <table id="putList1" lay-filter="putList1" lay-data="{id:'putList1'}"></table>
        </div>
    </div>
</div>
<div id="containerListModel">
    <table id="containerList" lay-filter="containerList" lay-data="{id:'containerList'}"></table>
    <div id="container" style="display:none; margin-top:20px;"></div>
</div>
<script src="/layui/layuiadmin/layui/layui.js"></script>
<!--<script type="text/javascript" src="/js/jquery-1.8.0.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>

<script>
    addId = 0;
    idsAll=[];
    layui.use(['table', 'layer', 'util', 'form'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let util = layui.util;
        let form = layui.form;
        table.render({
            elem: '#checkList'
            , url: '/storage/getCheckList' //数据接口
            , page: true //开启分页
            , limit: 15
            , limits: [15, 20, 50, 100, 2000]
            , toolbar: '#role_list'
            , loading: true
            , height: 'full-168'
            , cols: [
                [ //表头
                    {field: 'No', width: 60, title: '序号', type: 'numbers', fixed: 'left'}
                    , {field: 'id', title: 'ID', hide: 'hide'}
                    , {field: 'checkId', title: '盘点单号', width: 100}
                    , {field: 'device', title: '设备', sort: true, width: 170}
                    , {field: 'dept', title: '部门'}
                    , {field: 'workbenches', title: '工作台'}
                    , {field: 'status', title: '状态', width: 135}
                    , {field: 'username', title: '操作人', width: 110}
                    , {field: 'createdAtStr', title: '创建时间', width: 180}
                    , {field: 'updateAtStr', title: '更新时间', width: 180}
                    , {align: 'center', fixed: 'right', toolbar: '#test-table-operate-barDemo', width: 185, title: '操作'}
                ]
            ]
        });
        table.on('toolbar(checkList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case "outExcel":
                    let toolName = $("#toolName").val();
                    let model = $("#model").val();
                    let location = $("#location").val();
                    let userName = $("#userName").val();
                    let status = $("#status").val();
                    console.log(model)
                    window.open("/log/outGravityCabinetToolExcel?toolName=" + toolName + "&model=" + model + "&location=" + location + "&userName=" + userName + "&status=" + status + "", "_blank");
                    break;
                case "add":
                    layer.open({
                        id:'addPut',
                        type: 1,
                        title:'添加盘点单',
                        area: ['100%', '100%'], //自定义文本域宽高
                        content: $('#putListModel'),
                        btn: ['提交', '取消'],//这里content是一个普通的String
                        success: function(layero, index){
                            table.render({
                                elem: '#putList'
                                ,url: '/storage/getGoodsList1?id='+idsAll //数据接口
                                ,page: false //开启分页
                                ,toolbar:'#role_list1'
                                ,defaultToolbar: ['filter', 'print']
                                ,loading:true
                                ,height: 'full-118'
                                ,cols: [
                                    [ //表头
                                        {type: 'checkbox', fixed: 'left', width: 110}
                                        ,{field:'No', width:80, title: '序号', type:'numbers', fixed: 'left'}
                                        ,{field: 'id', title: 'ID',  sort: true, fixed: 'left', hide: 'hide'}
                                        ,{field: 'productName', title: '商品名称',  sort: true, fixed: 'left'}
                                        ,{field: 'productCode', title: '商品编码',  sort: true, fixed: 'left'}
                                        ,{field: 'overfillNum', title: '满箱数量',  sort: true, fixed: 'left'}
                                        // ,{field: 'overfill', title: '出库数量',  sort: true, fixed: 'left',edit: 'text'}
                                        ,{field: 'operate',align:'center', title: '操作',toolbar: '#test-table-operate-barDemo1', fixed: 'right',width:220}
                                    ]
                                ]
                            });
                            layero.addClass('layui-form');
                            // 将保存按钮改变成提交按钮
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter': 'testttt',
                                'lay-submit': ''
                            });
                            form.render();
                        },
                        yes:function(index,layero){
                            form.on('submit(testttt)',function(data){
                                let lh=checkStatus.data.length
                                let ids='';
                                for (let i=0;i<lh;i++){
                                    ids+=","+checkStatus.data[i].typeId
                                }

                            })
                        },
                        btn2:function(index,layero){
                        }
                    });
                    break;
            }
            ;
        });
        table.on('tool(checkList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data2 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let ids = data2.id;
            if(layEvent === 'details'){
                layer.open({
                    id:'addPut',
                    type: 1,
                    title:'盘点单商品详情',
                    area: ['60%', '80%'], //自定义文本域宽高
                    content: $('#putListModel1'),
                    btn: ['取消'],//这里content是一个普通的String
                    success: function(layero, index){
                        layerIndex = index;
                        table.render({
                            elem: '#putList1'
                            ,url: '/storage/getCheckDetailsList?id='+ids //数据接口
                            ,page: false //开启分页
                            ,toolbar:'#role_list2'
                            ,defaultToolbar: ['filter', 'print']
                            ,loading:true
                            ,height: 'full-118'
                            ,cols: [
                                [ //表头
                                    {field:'No', width:110, title: '序号', type:'numbers', fixed: 'left'}
                                    ,{field: 'id', title: 'ID',  sort: true, fixed: 'left', hide: 'hide'}
                                    ,{field: 'productName', title: '商品名称',  sort: true, fixed: 'left'}
                                    ,{field: 'productCode', title: '商品编码',  sort: true, fixed: 'left'}
                                    ,{field: 'inventoryNum', title: '库存数量',  sort: true, fixed: 'left'}
                                    ,{field: 'operate',align:'center', title: '操作',toolbar: '#test-table-operate-barDemo3', fixed: 'right',width:90}
                                ]
                            ]
                        });
                        layero.addClass('layui-form');
                        // 将保存按钮改变成提交按钮
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'testttt',
                            'lay-submit': ''
                        });
                        form.render();
                    },
                    yes:function(index,layero){
                        form.on('submit(testttt)',function(data){
                            var tableStatus = table.checkStatus('putList');
                            layer.close(layerIndex);

                        })

                    }
                });
            }
            else if(layEvent === 'activation'){
                layer.confirm('确定激活吗？', function(index){
                    $.post('/storage/activation',{id:ids},function(data){
                        if(data.code=="suss"){
                            layer.close(index);
                            layer.msg("操作成功")
                            table.reload('storageList', {
                                url: '/storage/getStorageList'
                            });
                        }else if(data.code=="1066"){
                            layer.msg("操作失败,长时间未操作，请重新登录后再试", {
                                icon: 2,
                            });
                        }else{
                            layer.msg("操作失败，请联系管理员", {
                                icon: 2,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            });
                        }
                    },'json');
                    layer.close(index);
                });
            }
            else if (layEvent === 'del'){
                layer.confirm('确定删除入库单？', function(index){
                    $.post('/storage/DelStore',{id:ids},function(data){
                        if(data.code=="suss"){
                            layer.close(index);
                            layer.msg("操作成功")
                            table.reload('storageList', {
                                url: '/storage/getStorageList'
                            });
                        }else{
                            layer.msg("操作失败，请联系管理员", {
                                icon: 2,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            });
                        }
                    },'json');
                    layer.close(index);
                });
            }
        });
        table.on('tool(putList1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data2 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let ids = data2.id;
            if (layEvent === 'view') {
                layer.open({
                    id: 'aa',
                    type: 1,
                    title: '盘点单储位详情',
                    area: ['60%', '80%'], //自定义文本域宽高
                    content: $('#containerListModel'),
                    btn: ['取消'],//这里content是一个普通的String
                    success: function (layero, index) {
                        layerIndex = index;
                        table.render({
                            elem: '#containerList'
                            , url: '/storage/getContainerList3?id=' + ids //数据接口
                            , page: true //开启分页
                            , limit: 10
                            , limits: [10, 30, 50, 100, 500]
                            , loading: true
                            , height: 'full'
                            , cols: [
                                [ //表头
                                    {field: 'No', width: 110, title: '序号', type: 'numbers', fixed: 'left'}
                                    , {field: 'id', title: 'ID', sort: true, hide: 'hide'}
                                    , {field: 'ContainerCode', title: '储位编码', sort: true, fixed: 'left'}
                                    , {field: 'device', title: '设备', sort: true, fixed: 'left'}
                                    , {field: 'actualCount', title: '数量', sort: true, fixed: 'left', edit: 'text'}
                                    , {field: 'usageRate', title: '使用率', sort: true, fixed: 'left'}
                                    // ,{field: 'num', title: '数量',  sort: true, edit: editable}
                                ]
                            ]
                        });
                        layero.addClass('layui-form');
                    },
                    yes: function (index, layero) {
                        layer.close(layerIndex);
                        return false;
                    }
                });
            }
        });
        table.on('toolbar(putList)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "add1":
                    layer.open({
                        id:'edUser',
                        type: 1,
                        title:'选择商品',
                        area: ['60%', '80%'], //自定义文本域宽高
                        content: $('#toolListModel'),
                        btn: ['提交', '取消'],//这里content是一个普通的String
                        success: function(layero, index){
                            layerIndex = index;
                            table.render({
                                elem: '#toolList'
                                ,url: '/storage/getGoodsList' //数据接口
                                ,page: true //开启分页
                                ,limit:10
                                ,limits:[10,30,50,100,2000]
                                ,loading:true
                                ,height: 'full'
                                ,cols: [
                                    [ //表头
                                        {type: 'checkbox', fixed: 'left', width: 110}
                                        ,{field:'No', width:110, title: '序号', type:'numbers', fixed: 'left'}
                                        ,{field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                                        ,{field: 'productName', title: '商品名称',  sort: true, fixed: 'left'}
                                        ,{field: 'productCode', title: '商品编码',  sort: true, fixed: 'left'}
                                        ,{field: 'expectNum', title: '库存数量',  sort: true, fixed: 'left'}
                                        ,{field: 'overfillNum', title: '预警量',  sort: true, fixed: 'left'}
                                    ]
                                ]
                            });
                            layero.addClass('layui-form');
                            // 将保存按钮改变成提交按钮
                            layero.find('.layui-layer-btn0').attr({
                                'lay-filter': 'testttt',
                                'lay-submit': ''
                            });
                            form.render();
                        },
                        yes:function(index,layero){
                            form.on('submit(testttt)',function(data){
                                var tableStatus = table.checkStatus('toolList');
                                let lh=tableStatus.data.length
                                idsAll.push(tableStatus.id)
                                console.log(tableStatus)
                                for (let i=0;i<lh;i++){
                                    console.log(tableStatus.data[i].id)
                                    idsAll.push(tableStatus.data[i].id)
                                }
                                console.log(idsAll)
                                console.log(idsAll)
                                table.reload('putList', {
                                    url: '/storage/getGoodsList1'
                                    ,where: {
                                        id:idsAll.toString(),
                                    } //设定异步数据接口的额外参数
                                });
                            })
                            layer.close(layerIndex);
                            return false;
                        },
                        btn2:function(index,layero){
                            layer.close(index);
                        }
                    });
                    break;
            };
        });
        table.on('tool(putList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data2 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let ids = data2.id;
            if(layEvent === 'choose'){
                layer.open({
                    id:'aa',
                    type: 1,
                    title:'查看容器',
                    area: ['60%', '80%'], //自定义文本域宽高
                    content: $('#containerListModel'),
                    btn: ['提交', '取消'],//这里content是一个普通的String
                    success: function(layero, index){
                        layerIndex = index;
                        table.render({
                            elem: '#containerList'
                            ,url: '/storage/getContainerAndGoodsList?goodsId='+ids //数据接口
                            ,page: true //开启分页
                            ,limit:10
                            ,limits:[10,30,50,100,500]
                            ,loading:true
                            ,height: 'full'
                            ,cols: [
                                [ //表头
                                    {type: 'checkbox', fixed: 'left', width: 110}
                                    ,{field:'No', width:80, title: '序号', type:'numbers', fixed: 'left'}
                                    ,{field: 'id', title: 'ID',  sort: true, hide: 'hide'}
                                    ,{field: 'ContainerCode', title: '储位编码',  sort: true, fixed: 'left'}
                                    ,{field: 'device', title: '设备',  sort: true, fixed: 'left'}
                                    ,{field: 'status', title: '状态',  sort: true, fixed: 'left'}
                                    // ,{field: 'row', title: '行号',  sort: true, fixed: 'left'}
                                    // ,{field: 'arrange', title: '列号',  sort: true, fixed: 'left'}
                                    ,{field: 'usageRate', title: '使用率',  sort: true, fixed: 'left'}
                                    // ,{field: 'num', title: '数量',  sort: true, edit: 'text'}
                                ]
                            ]
                        });
                        layero.addClass('layui-form');
                        // 将保存按钮改变成提交按钮
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'testttt',
                            'lay-submit': ''
                        });
                        form.render();
                    },
                    yes:function(index,layero){
                        form.on('submit(testttt)',function(data){
                            var tableStatus = table.checkStatus('containerList');
                            let lh=tableStatus.data.length
                            for (let i=0;i<lh;i++){
                                ContainidsAll.push(tableStatus.data[i].id)
                            }
                            containerId.set(ids,ContainidsAll.toString())
                        })
                        layer.close(layerIndex);
                        return false;
                    },
                    btn2:function(index,layero){
                        layer.close(index);
                    }
                });
            }
            else if (layEvent === 'del'){
                let index = idsAll.indexOf(ids);
                idsAll.splice(index, 1);
                table.reload('putList', {
                    url: '/storage/getGoodsList1'
                    ,where: {
                        id:idsAll.toString(),
                    } //设定异步数据接口的额外参数
                });
            }
        });
        util.event('lay-active', {
            reload: function (res) {
                location.reload();
            },
            AllData: function () {
                let toolName = $("#toolName").val();
                let model = $("#model").val();
                let location = $("#location").val();
                let userName = $("#userName").val();
                let status = $("#status").val();
                if (toolName == '' && model == '' && location == '' && userName == '' && status == '') {
                    layer.msg("当前无筛选条件")
                } else {
                    table.reload('outboundList', {
                        url: '/storage/SearchtoolReceiveLogList'
                        , where: {
                            toolName: toolName,
                            model: model,
                            location: location,
                            userName: userName,
                            status: status,
                        } //设定异步数据接口的额外参数
                    });
                }

            },
            AllData1: function () {
                let toolName = $("#toolName").val();
                let model = $("#model").val();
                let location = $("#location").val();
                let userName = $("#userName").val();
                let status = $("#status").val();
                if (toolName == '' && model == '' && location == '' && userName == '' && status == '') {
                    layer.msg("当前无筛选条件")
                } else {
                    table.reload('outboundList', {
                        url: '/storage/SearchtoolReceiveLogList'
                        , where: {
                            toolName: toolName,
                            model: model,
                            location: location,
                            userName: userName,
                            status: status,
                        } //设定异步数据接口的额外参数
                    });
                }

            },
        })

    })
</script>
</body>
</html>
